<template>
    <div class="body">
        <h3 class="top">CSS3动画</h3>
        <h4 class="left">阴影</h4>
        <h5 class="left">&nbsp;&nbsp;&nbsp;文字阴影</h5>
        <p class="left">格式:text-shadow:阴影1，阴影2...;（阴影是可以叠加的）阴影格式:第一个:横向偏移量，第二个:纵向偏移量
            第三个:阴影模糊半径，第四个:阴影颜色。
        </p>
        <div class="testbox">
            <p class="text-shadow top">文字阴影</p>
        </div>
        <h5 class="left">&nbsp;&nbsp;&nbsp;盒子阴影</h5>
        <p class="left">格式:box-shadow:阴影1，阴影2...;阴影格式:第一个:水平偏移位置，第二个:垂直偏移位置
            第三个:阴影模糊度，第四个:外延值，第五个:颜色，第六个:是否为内置阴影。
        </p>
        <div class="testbox">
            <div class="box-shadow"></div>
        </div>
    </div>
</template>

<script lang="ts" setup>

</script>

<style lang='scss' scoped>
.body {
    height: 100vh;
    flex: 5;
    background-color: #fff;
    margin-left: 30px;
    text-align: center;

    .top {
        margin-top: 20px;
    }

    .left {
        text-align: left;
        margin-left: 112px;
        margin-bottom: 10px;
    }

    .testbox {
        width: 80%;
        border: 1px solid #000;
        margin: 10px auto;

        .text-shadow {
            font-size: 40px;
            font-weight: 900;
            text-shadow: 1px 1px 3px red;
        }

        .box-shadow {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            margin: 20px auto;
            background-color: orange;
            box-shadow: -5px -5px 3px #838181 inset, 5px 5px 3px #fff inset;
        }

        .box-shadow:hover {
            box-shadow: -5px -5px 3px #000 inset, 5px 5px 3px #000 inset;
        }

    }

}
</style>